<template>
    <div class="full-layout flex-between" v-if="flag==='collapse'||flag==='expand'">
        <div
        style="margin-left:10px"
        @click.stop="null">
            {{userStore.themeValue?'夜间模式':'白天模式'}}
        </div>
        <div class="toggleWrapper" @click.stop="null">
            <input type="checkbox" class="dn" id="dn"  
            :checked="userStore.themeValue"
            @change="changeTheme">
            <label for="dn" class="toggle">
                <span class="toggle__handler">
                    <span class="crater crater--1"></span>
                    <span class="crater crater--2"></span>
                    <span class="crater crater--3"></span>
                </span>
                <span class="star star--1"></span>
                <span class="star star--2"></span>
                <span class="star star--3"></span>
                <span class="star star--4"></span>
                <span class="star star--5"></span>
                <span class="star star--6"></span>
            </label>
        </div>
    </div>
 </template>

<script lang='ts'>
import { useToggle } from '@vueuse/shared';
import { useDark } from '@vueuse/core';
import { onMounted, reactive, toRefs } from 'vue';
import { useUsersStore } from '@/store/user';
export default {
    name:'themeIsland',
    props: {
        flag:{
            type:String,
            default:''
        }
    },
    components: {

    },
    emits:[],
    setup (props, context) 
    {
        const userStore = useUsersStore();
        const isDark = useDark({
            // 存储到localStorage/sessionStorage中的Key 根据自己的需求更改
            storageKey: 'useThemeKey',
            // 暗黑class名字
            valueDark: 'dark',
            valueLight: 'light'
        });
        const toggleDark = useToggle(isDark);
        // const init = () => 
        // {
        //     let useThemeKey = window.localStorage.getItem('useThemeKey');
        //     if (useThemeKey)
        //     {
        //         if (useThemeKey === 'light' || useThemeKey === 'auto')
        //         {
        //             data.themeValue = false;
        //         }
        //         else
        //         {
        //             data.themeValue = true;
        //         }
        //     }
        //     else
        //     {
        //         data.themeValue = false;
        //     }
        // };
        let data = reactive({
            themeValue:false
        });
        let methods = {
            changeTheme ()
            {
                toggleDark();
                userStore.themeValue = !userStore.themeValue;
                // data.themeValue = !data.themeValue;
            }
        };

        onMounted(() => 
        {
            // init();
        });
        return { 
            ...toRefs(data),
            ...methods,
            userStore
        };
    }
};
</script>
 
 <style scoped lang="scss">
 .toggleWrapper {
     margin-right: 5px;
     color: white;
   }
   
   .toggleWrapper input {
     position: absolute;
     left: -99em;
   }
   
   .toggle {
     cursor: pointer;
     display: inline-block;
     position: relative;
     width: 70px;
     height: 35px;
     top: 1px;
     background-color: #83d8ff;
     border-radius: 84px;
     transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
   }
   
   .toggle:before {
     content: '';
     position: absolute;
     left: -50px;
     top: 15px;
     font-size: 18px;
   }
   
   .toggle:after {
     content: '';
     position: absolute;
     right: -48px;
     top: 15px;
     font-size: 18px;
     color: #749ed7;
   }
   
   .toggle__handler {
     display: inline-block;
     position: absolute;
     z-index: 1;
     top: 2px;
     left: 3px;
     width: 30px;
     height: 30px;
     background-color: #ffcf96;
     border-radius: 50px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
     transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
     transform: rotate(-45deg);
   }
   
   .toggle__handler .crater {
     position: absolute;
     background-color: #e8cda5;
     opacity: 0;
     transition: opacity 200ms ease-in-out;
     border-radius: 100%;
   }
   
   .toggle__handler .crater--1 {
     top: 10px;
     left: 7px;
     width: 4px;
     height: 4px;
   }
   
   .toggle__handler .crater--2 {
     top: 16px;
     left: 14px;
     width: 6px;
     height: 6px;
   }
   
   .toggle__handler .crater--3 {
     top: 6px;
     left: 16px;
     width: 8px;
     height: 8px;
   }
   
   .star {
     position: absolute;
     background-color: #fff;
     transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
     border-radius: 50%;
   }
   
   .star--1 {
     top: 8px;
     left: 27px;
     z-index: 0;
     width: 25px;
     height: 3px;
   }
   
   .star--2 {
     top: 17px;
     left: 25px;
     z-index: 1;
     width: 30px;
     height: 3px;
   }
   
   .star--3 {
     top: 25px;
     left: 17px;
     z-index: 0;
     width: 30px;
     height: 3px;
   }
   
   .star--4, .star--5, .star--6 {
     opacity: 0;
     transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);
   }
   
   .star--4 {
     top: 13px;
     left: 15px;
     z-index: 0;
     width: 2px;
     height: 2px;
     transform: translate3d(3px, 0, 0);
   }
   
   .star--5 {
     top: 25px;
     left: 17px;
     z-index: 0;
     width: 3px;
     height: 3px;
     transform: translate3d(3px, 0, 0);
   }
   
   .star--6 {
     top: 27px;
     left: 28px;
     z-index: 0;
     width: 2px;
     height: 2px;
     transform: translate3d(3px, 0, 0);
   }
   
   input:checked + .toggle {
     background-color: #749dd6;
   }
   
   input:checked + .toggle:before {
     color: #749ed7;
   }
   
   input:checked + .toggle:after {
     color: #fff;
   }
   
   input:checked + .toggle .toggle__handler {
     background-color: #ffe5b5;
     transform: translate3d(34px, 0, 0) rotate(0);
   }
   
   input:checked + .toggle .toggle__handler .crater {
     opacity: 1;
   }
   
   input:checked + .toggle .star--1 {
     width: 2px;
     height: 2px;
   }
   
   input:checked + .toggle .star--2 {
     width: 4px;
     height: 4px;
     transform: translate3d(-5px, 0, 0);
   }
   
   input:checked + .toggle .star--3 {
     width: 2px;
     height: 2px;
     transform: translate3d(-7px, 0, 0);
   }
   
   input:checked + .toggle .star--4, input:checked + .toggle .star--5, input:checked + .toggle .star--6 {
     opacity: 1;
     transform: translate3d(0, 0, 0);
   }
   
   input:checked + .toggle .star--4 {
     transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
   }
   
   input:checked + .toggle .star--5 {
     transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
   }
   
   input:checked + .toggle .star--6 {
     transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
   }
 </style>
 